<template>
  <layout>
    <template slot="aside">
      <tree :data="data" :props="props"/>
    </template>
    <template slot="content">
      <router-view />
    </template>
  </layout>
</template>
<script>
import Layout from '@/components/layout'
import Tree from '@/components/tree'
export default {
  name: 'Home',
  components: {
    Layout,
    Tree
  },
  data: () => ({
    data: [
      {
        id: '1',
        label: 'echarts',
        children: [
          {
            id: '1_1',
            label: '极坐标与柱状图实现从外到内的圆环',
            path: '/echarts/polarbar'
          },
          {
            id: '1_2',
            label: '极坐标与饼图实现从外到内的环',
            path: '/echarts/nestpie'
          },
          {
            id: '1_3',
            label: '自定义legend',
            path: '/echarts/legendcustom'
          },
          {
            id: '1_4',
            label: '鼠标移入饼图悬浮效果',
            path: '/echarts/hoverpie'
          },
          {
            id: '1_5',
            label: '动态关系图',
            path: '/echarts/graph'
          },
          {
            id: '1-6',
            label: '不从起点开始的仪表盘',
            path: '/echarts/gauge'
          }
        ]
      },
      {
        id: '2',
        label: 'css预处理器',
        children: [
          { label: '全局使用less', path: '/csspreprocessor/less', id: '2_1' }
        ]
      },
      {
        id: '3',
        label: '事件',
        children: [
          { label: '阻止子组件的事件冒泡', path: '/event/click', id: '3_1' }
        ]
      },
      {
        id: '4',
        label: '路由',
        children: [
          { label: '路由传参', path: '/router/params', id: '4_1' }
        ]
      },
      {
        id: '5',
        label: 'vuex',
        children: [
          { label: 'vuex的使用', path: '/vuex/state', id: '5_1' }
        ]
      },
      {
        id: '6',
        label: 'eslint',
        children: [
          {label: 'eslint的配置',path: '/eslint', id: '6_1'}
        ]
      }
    ],
    props: {
      children: 'children',
      label: 'label'
    }
  })
}
</script>
